<template>
  <div>
    {{mag}}
    {{$store.state.count}} - {{count}}
    <!-- <div>
      <button @click="$store.commit('add',5)">加5</button>
      <button @click="$store.commit('reduce',10)">减10</button>
    </div> -->
    <div>
      <button @click="add({n:5})">加5</button>
      <button @click="reduce(10)">减10</button>
    </div>
    <div>异步</div>
    <div>
      <button @click="addAction(5)">加5</button>
      <button @click="reduceAction(10)">减10</button>
    </div>
    <div>
      <button @click="isyibu()">验证同步异步</button>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store'
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'

export default {
  data() {
    return {
      mag:'hello'
    }
  },store,
  //第一种
  // computed:{
  //   count(){
  //     return store.state.count
  //   }
  // }
  //第二种
  // computed:mapState({
  //   count:state => state.count 
  // })
  //第三种
  computed:{
    ...mapState(['count']),
    // count(){
    //   return this.$store.getters.count
    // }
    // ...mapGetters(['count'])
  },
  // methods:mapMutations(['add','reduce'])
  methods:{
    ...mapMutations(['add','reduce']),
    ...mapActions(['addAction','reduceAction']),
    isyibu(){
      this.addAction(5)
      console.log(777770)
    }
  }
}
</script>